<template>
  <el-form ref="formRef" :model="form" v-loading="loading">
    <pub-edit-description :ndColumns="2">
      <pub-edit-description-item :span="2" label="上级菜单" v-if="form.type != 0">
        <el-form-item prop="parentName">
          <pub-input :disabled="true" v-model="form.parentName" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        :label="form.type == 3 ? '按钮名称' : '菜单名称'"
        required
      >
        <el-form-item prop="name" :rules="$formRules.input">
          <pub-input v-model="form.name" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        label="菜单排序"
        required
      >
        <el-form-item prop="url" :rules="$formRules.sort">
          <pub-input-number v-model="form.sort" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        v-if="form.type == 3"
        :span="1"
        label="鉴权字符"
        required
      >
        <el-form-item prop="frontendRouting" :rules="$formRules.input">
          <pub-input v-model="form.frontendRouting" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        :span="1"
        :label="form.type == 3 ? '按钮标识' : '路由标识'"
        required
      >
        <el-form-item prop="code" :rules="$formRules.input">
          <pub-input v-model="form.code" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        v-if="form.type != 3"
        :span="1"
        label="代码路径"
        required
      >
        <el-form-item prop="component" :rules="$formRules.input">
          <pub-input v-model="form.component" />
        </el-form-item>
      </pub-edit-description-item>
     
      <pub-edit-description-item
        :span="1"
        :label="form.type == 3 ? '按钮类型' : '菜单类型'"
        required
      >
        <el-form-item prop="type" :rules="$formRules.resourceType">
          <pub-select-dict
            width="100%"
            v-model="form.type"
            dict-code="SYS_CDLX"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="平台类型" required>
        <el-form-item prop="platform" :rules="$formRules.select">
          <pub-select-dict
            width="100%"
            v-model="form.platform"
            dict-code="SYS_PTLX"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="显示当前菜单" required>
        <el-form-item prop="isDisplayInMainMenu" :rules="$formRules.select">
          <pub-select-dict
            width="100%"
            v-model="form.isDisplayInMainMenu"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item
        v-if="form.type == 2 || form.type == 3"
        :span="1"
        label="高亮标识"
      >
        <el-form-item prop="activeName">
          <pub-input v-model="form.activeName" />
        </el-form-item>
      </pub-edit-description-item>

      <pub-edit-description-item
        v-if="form.type != 3"
        :span="1"
        label="页面缓存"
        required
      >
        <el-form-item prop="keepAlive" :rules="$formRules.select">
          <pub-select-dict
            width="100%"
            v-model="form.keepAlive"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <!-- <pub-edit-description-item
        v-if="form.type != 3"
        :span="1"
        label="是否可关闭"
        required
      >
        <el-form-item prop="closeTab" :rules="$formRules.select">
          <pub-select-dict
            width="100%"
            v-model="form.closeTab"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item> -->
      <pub-edit-description-item
        v-if="form.type != 3"
        :span="1"
        label="展示快捷标签"
      >
        <el-form-item prop="isShowHistoryTag">
          <pub-select-dict
            width="100%"
            v-model="form.isShowHistoryTag"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item  :span="1" label="菜单图标">
        <el-form-item prop="icon">
          <pub-input v-model="form.icon" />
          <div class="right-box">
            <span>自动生成图标：</span>
            <el-checkbox
              @change="
                val =>
                  val
                    ? (form.icon = pinyin.getFullChars(form.name).toLowerCase())
                    : (form.icon = '')
              "
              v-model="checked"
              value=""
              size="large"
            />
          </div>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item v-if="form.type != 3" label="菜单重定向">
        <el-form-item prop="redirect">
          <pub-input v-model="form.redirect" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="是否全屏">
        <el-form-item prop="isFullScreen">
          <pub-select-dict
            width="100%"
            v-model="form.isFullScreen"
            dict-code="SF"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item v-if="form.type != 0" :span="1" label="左侧菜单功能">
        <el-form-item prop="isShowLeftMenus">
          <pub-select-dict
            width="100%"
            v-model="form.isShowLeftMenus"
            dict-code="ZDZT"
            placeholder="请选择"
          />
        </el-form-item>
      </pub-edit-description-item>
    </pub-edit-description>
    <div class="dialog-footer-btn">
    <el-button type="default" @click="cancel">取消</el-button>
    <el-button
      v-hasPermissions="['basic:system:menus:save']"
      type="primary"
      @click="submit(formRef)"
      v-prevent-repeat-click
    >
      保存
    </el-button>
  </div>
  </el-form>
</template>

<script setup>
import {
  get_menus_detail,
  update_menus_detail,
  add_menus_detail
} from '@/api/system'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
import pinyin from 'js-pinyin'
const checked = ref(false)
const props = defineProps({
  defaultForm: {
    type: Object
  },
  editType: {
    type: String,
    default: ''
  }
})

let form = ref({})
let loading = ref(false)
const formRef = ref()
const typeOptions = reactive([
  {
    value: 1,
    label: '目录'
  },
  {
    value: 2,
    label: '页面'
  },
  {
    value: 3,
    label: '按钮'
  }
])
const displayMainMenuOptions = reactive([
  {
    value: 0,
    label: '不显示'
  },
  {
    value: 1,
    label: '显示'
  }
])
const emit = defineEmits(['cancel', 'success'])

const getResource = id => {
  loading.value = true
  get_menus_detail(id).then(res => {
    if (res.succeed) {
      loading.value = false
      form.value = res.data
      form.value.id = id
    }
  })
}

// watch([props.defaultForm,props.editType], (newValue,oldValue) => {
//   if (props.editType === 'add') {
//     form.pid = props.defaultForm.pid
//     form.parentName = props.defaultForm.parentName
//   } else {
//     form.id = props.defaultForm.id
//     getResource(form.id)
//   }
// }, {
//   deep: true,
//   immediate: true
// })

onMounted(() => {
  form.value.isDisplayInMainMenu = '0'
  if (props.editType === 'add') {
    form.value.pid = props.defaultForm.pid
    form.value.parentName = props.defaultForm.parentName
  } else {
    form.value.id = props.defaultForm.id
    getResource(form.value.id)
  }
})

const submit = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      if (props.editType === 'add') {
        add()
      } else {
        edit()
      }
    }
  })
}

const edit = () => {
  update_menus_detail(form.value).then(res => {
    if (res.succeed) {
      emit('success')
    }
    loading.value = false
  })
}
const add = () => {
  add_menus_detail(form.value).then(res => {
    if (res.succeed) {
      emit('success')
    }
    loading.value = false
  })
}
const cancel = () => {
  emit('cancel')
}
</script>

<style>
/* 弹窗提交时loading样式需占满整个弹窗 */
.el-loading-parent--relative {
  position: inherit !important;
}
.right-box {
  display: flex;
  align-items: center;
  height: 30px;
}
</style>
